<template>
<div class="paper-item-cp">
    <div class="left-container">
        <img
            class="left-img"
            :src="'https://s2.loli.net/2021/12/05/oH7tL3Ged6avOzb.jpg'"
            @click="toInfo">
        <div class="date">
            2021-21-21
        </div>
    </div>
    <div class="right-container">
        <div
            class="title"
            @click="toInfo">
            itemData.name看见看见爱上肯德基卡上的空间啊哈速度快加
        </div>
        <div class="tag-list">
            <div 
                class="tag">
                实用新型
            </div>
        </div>
        <div class="content">
            看见看见爱上肯德基卡上的空间啊哈速度快加看见看见爱上肯德基卡上的空间啊哈速度快加
        </div>
    </div>
</div>
</template>

<script>
/*
 纸张列表个体
 */
export default {
    name: 'PaperItem',
    props:{
        itemData:{
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
        };
    },
    methods: {
        toInfo(){  //跳转到详情页面
            this.$router.push({ 
                name: 'PatentInfo',
                params:{
                    href:this.itemData.href,
                    from:this.$route.path,
                },
            });
        },
    }
}
</script>

<style scoped lang="scss">
.paper-item-cp{
    --my-border-radius:10px;
    background-color: white;
    padding: 10px;
    border-radius: var(--my-border-radius);
    border: 1px solid #dadada;
    box-sizing: border-box;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 160px 1fr;
    text-align: left;
    >.left-container{
        display: grid;
        grid-gap: 10px;
        height: fit-content;
        >.left-img{
            width: 160px;
            border: 1px solid #ececec;
            border-radius: var(--my-border-radius) !important;
            overflow: hidden;
            cursor: pointer;
        }
        >.date{
            font-size: 17px;
            font-weight: bold;
        }
    }
    >.right-container{
        display: grid;
        grid-gap: 5px;
        height: fit-content;
        >.title{
            font-size: 22px;
            font-weight: bold;
            color: #2c3e50;
            cursor: pointer;
            border-radius: var(--my-border-radius);
            transition: all 0.2s;
            &:hover{
                background-color: #dadada;
            }
        }
        >.tag-list{
            display: flex;
            flex-wrap: wrap;
            font-size: 12px;
            >.tag{
                padding: 2px 5px;
                border-radius: 3px;
                margin-right: 5px;
                margin-bottom: 5px;
                background-color: #2c3e50;
                color: wheat;
            }
        }
        >.content{
            font-size: 20px;
        }
    }
}
</style>
